<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#fff"
    unique-opened
    @select="handleSelect"
    router>

    <div class="menu-logo">
      <i class="el-icon-s-home"></i>
      <span v-show="!isCollapse">管理系统</span>
    </div>
    <template v-for="item in menuList" >
      <el-submenu :index="item.path" v-if="undefined!==item && item.pid == 0 && item.type != 1" >
        <template slot="title">
          <i :class="item.icon" style="margin: auto"></i>
          <span slot="title">{{item.menuName}}</span>
        </template>
        <el-menu-item v-for="(itemChild , index) in item.children" :index="itemChild.path" :key="index" v-if="itemChild.menuName">
          <i :class="itemChild.icon" ></i>
          <span slot="title"  >{{itemChild.menuName}}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item :index="item.path"  v-else-if="item.type == 1" >
        <i :class="item.icon" ></i>
        <span slot="title"  >{{item.menuName}}</span>
      </el-menu-item>
      <el-menu-item :index="item.path" v-else>
        {{item.menuName}}
      </el-menu-item>
    </template>

  </el-menu>


</template>

<script >
  export default {
    mounted(){
      this._getUserMenu();
    },
    props:{
      isCollapse:false
    },
    data() {
      return {
        activeMenu:'/',
        menuList:[],
      }
    },
    methods:{
      handleSelect(o){

        this.$emit('on-result-change',{'key':key, 'keyPath':keyPath});
        // if (keyPath[1]===undefined){
        //   this.$router.push({ name: key });
        // }else{
        //   this.$router.push({ name: keyPath[1] });
        // }
      },
      handleSelect2(key, keyPath){

        this.$emit('on-result-change',{'key':key, 'keyPath':keyPath});
        // if (keyPath[1]===undefined){
        //   this.$router.push({ name: key });
        // }else{
        //   this.$router.push({ name: keyPath[1] });
        // }
      },
      _getUserMenu(){
        this.$http.get('/api/base/sys_resource/list_menu').then(res=>{
          let returnData=res.data;
          if (undefined === returnData || '' ===returnData || '未登录' ===returnData){
            this.$router.push({path:'/login',query:{}});
          }else{
            if (undefined != returnData.status&& returnData.status == 500){
              this.$router.push({path:'/login',query:{}});
            }else{
              this.menuList=returnData.data;
            }
          }
        }).catch(err=>{
          this.$router.push({path:'/login',query:{}});
          console.log(err)
        })
      }

    }
  }
</script>

<style scoped>
/* 菜单logo样式 */
.menu-logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
